
import { createStore, mapState, useStore } from 'vuex';
import { computed } from "vue";

export interface State {
  theme: "light" | "dark";
  address: AnyObject;
  card: AnyObject;
};

const state: State = {
  theme: "light",
  address: {},
  card: {}
};

const mutations = {
  setState(state: State, payload: { key: keyof State; value: any }) {
    state[payload.key] = payload.value;
  },
};

const actions = {
};

export const useMapState = (getKeys: string[]) => {
  const $store = useStore();
  const storeState: any = {};
  const storeFns = mapState(getKeys)

  Object.keys(storeFns).forEach((fnKeys: string) => {
    const fn = storeFns[fnKeys].bind({ $store })
    storeState[fnKeys] = computed(fn)
  })

  return storeState;
}

export default createStore({
  plugins: [],
  state,
  mutations,
  actions
});